<!DOCTYPE html>
<html lang="zh_CN">
	<head>
		<meta charset="UTF-8">
		<title>短链密码访问</title>
		<script src="/resources/js/jquery-3.1.1.min.js"></script>
		<link rel="icon" type="image/x-icon" href="/resources/images/favicon.ico">
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: "Microsoft YaHei UI Light", serif;
			}
			.max-div-box {
				margin: 130px auto;
				width: 600px;
			}

			/* 长链接输入 */
			.input-div-box {
				width: 600px;
				margin-top: 30px;
			}
			.link-input-div-box {
				padding: 15px 20px;
				box-sizing: border-box;
				width: 600px;
				height: 70px;
				border: 1px solid #845EC2;
				border-radius: 10px;
			}
			.link-input-div-box input {
				float: left;
				width: 410px;
				height: 40px;
				outline: none;
				border: none;
				font-size: 15px;
			}
			.link-input-div-box button {
				float: right;
				width: 110px;
				height: 40px;
				outline: none;
				border: none;
				color: #ffffff;
				font-size: 15px;
				border-radius: 5px;
				background-color: #845EC2;
				cursor: pointer;
			}
			.input-div-box p {
				margin-top: 10px;
				height: 20px;
				line-height: 20px;
				color: #FF0000;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="max-div-box">
			<div class="input-div-box">
				<div class="link-input-div-box">
					<label for="accessPassword">
						<input type="text" name="accessPassword" id="accessPassword" placeholder="请输入短链访问密码" maxlength="20">
					</label>
					<button type="submit" onclick="submitForm()">访问短链</button>
				</div>
				<p id="errorMessage"></p>
			</div>
		</div>
	</body>
	<script>
		/**
		 * 短链密码访问
		 */
		function submitForm() {
			const errorMessage = $("#errorMessage");
			errorMessage.attr("style", "display: none");
			const accessPassword = $("#accessPassword");
			const accessPasswordVal = accessPassword.val();
			if (accessPasswordVal === null || accessPasswordVal === undefined || accessPasswordVal === '') {
				errorMessage.attr("style", "display: block");
				errorMessage.html("请输入短链访问密码");
				return false;
			}
			const searchParams = new URLSearchParams(window.location.search);
			const mappingKey = searchParams.get('mappingKey');
			const data = {
				"mappingKey" : mappingKey,
				"accessPassword": accessPasswordVal
			}
			$.ajax({
				type: "POST",
				url: "/password",
				contentType: "application/json",
				dataType: "json",
				data: JSON.stringify(data),
				success: function (r) {
					if (r.code === 200) {
						errorMessage.attr("style", "display: block");
						errorMessage.css("color", "#219847");
						errorMessage.html("验证成功，正在跳转...");
						setTimeout(function () {
							window.location.replace(r.data);
						}, 300)
					} else {
						errorMessage.attr("style", "display: block");
						errorMessage.html(r.message);
					}
				},
				error: function (e) {
					errorMessage.attr("style", "display: block");
					errorMessage.html("短链接密码验证失败：" + e);
				}
			});
		}
	</script>
</html>